<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="page-back-img">
			<image src="../../static/back_img.jpg"></image>
		</view>
		<!-- 内容 -->
		<view class="container">
			<!-- title -->
			<view class="header" :style="{paddingTop: status_height}">
				<text>{{"卡杰香氛系统"}}</text>
			</view>
			<!-- 剩余时间、运行时间 -->
			<view class="timer">
				<!-- 背景图 -->
				<view class="timer-bg">
					<image src="../../static/time_bg.png"></image>
				</view>
				<!-- 剩余时间 -->
				<view class="time-remaining">
					<text>{{time_remaining + "s"}}</text>
					<text>{{"剩余"}}</text>
				</view>
				<!-- 运行时间 -->
				<view class="time-run">
					<!-- 第一个 -->
					<view class="time-run-item">
						<text style="margin-left: 10%">{{time_run[0]}}</text>
					</view>
					<!-- 中间的 -->
					<view class="time-run-item" :class="index == time_run.length - 1 ? 'time-run-item-last' : ''" 
						v-if="item && item != time_run[index + 1]" v-for="(item,index) in time_run" :key="index">
						<text style="margin-left: 10%">{{item}}</text>
					</view>
				</view>
				<!-- 进度条 -->
				<view class="time-progress">
					<view class="time-progress-item" v-for="(item,index) in progress" :key="index">
						<image v-if="index >= (10 - index_bottom)" :src="item.img"></image>
						<image v-else :src="item.img_sel"></image>
					</view>
				</view>
			</view>
			<!-- 香氛浓度设置/模式组 -->
			<view class="concentration">
				<view>
					<text>{{"香氛浓度设置"}}</text>
				</view>
				<!-- 按钮 -->
				<view class="concentration-btn">
					<view class="concentration-btn-item" :class="status_arr_sel == index ? 'concentration-btn-item-sel' : '' " 
					 v-for="(item,index) in status_arr" :key="index" @click="modify_model(index)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<!-- 按钮组/开关/模式切换 -->
			<view class="btn-group">
				<!-- 开关 -->
				<view class="btn-group-item">
					<view class="btn-group-item-img" 
					 :class="{'btn-group-item-img-sel': switch_state }" @click="fragrance_switch">
						<image src="../../static/switch.png" ></image>
					</view>
					<text>{{"香氛开关"}}</text>
				</view>
				<!-- 模式 -->
				<view class="btn-group-item">
					<view class="btn-group-item-img" @click="modify_model('switch')">
						<image src="../../static/model.png" ></image>
					</view>
					<text>{{"香氛模式"}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bluetooth from "../../common/bluetooth/bluetooth.js" 
	export default {
		data() {
			return {
				// 状态栏高度
				status_height: "10px",
				// 间隔时间
				time_run: [0, 5, 10, 15, 20, 25, 30],
				// 运行的剩余时间
				time_remaining: 0,
				// 运行时间、间隔时间-仅限输入框
				timer:{
					run_time: "",//运行时间
					interval_time: ""//间隔时间
				},
				// 进度条
				progress: [{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					},{
						status: false,
						img: "../../static/time_run.png",
						img_sel: "../../static/time_run_sel.png"
					}
				],
				// 香氛进度条状态改变
				time_run_bottom: 15,// 选中区
				// 模式
				status_arr: [
					"微香", "清香","淡香","浓香"
				],
				status_arr_sel: 0,//选中模式
				// 开关
				switch_state: false,
				// 间隔时间定时器
				timer_interval: null,
				// 运行时间定时器
				run_timer: null,
				// 渲染变量
				index_bottom: 0,
				runTime: 0
				// 
			}
		},
		onLoad() {
			// 获取状态栏高度
			this.get_status_height()
			// 时长\间隔时间\模式初始化
			this.initialize()
			// 判断用户是否打开gps定位服务\蓝牙开关
			this.location_status()
		},
		onUnload() {
			// 页面卸载时清除定时器
			// 运行时间定时器
			if(this.run_timer){
				clearInterval(this.run_timer)
				this.run_timer = null
			}
			// 间隔时间定时器
			if(this.timer_interval){ 
				clearInterval(this.timer_interval)
				this.timer_interval = null
			}
			// 断开连接并释放资源
			bluetooth.disconnect()
		},
		methods: {
			// 判断用户是否打开gps定位服务\蓝牙开关
			location_status(){
				//位置服务开关/蓝牙开关
				let {locationEnabled, bluetoothEnabled} = uni.getSystemInfoSync()
				// 位置服务开关
				if(!locationEnabled){
					uni.showModal({
						content:"请打开位置服务并重试"
					})
					return
				}
				// 蓝牙开关
				if(!bluetoothEnabled){
					uni.showModal({
						content:"请打开蓝牙服务并重试"
					})
					return
				}
				// 初始化蓝牙设备
				bluetooth.initialize()
			},
			// 时长\间隔时间\模式初始化
			initialize(){
				let runTime = 10,intervalTime = 60
				// 读取缓存查看缓存中是否存在运行时间和间隔时间，存在则已缓存时间初始化，不存在则新建初始化时间
				if(uni.getStorageSync("run_time") && uni.getStorageSync("interval_time")){
					runTime = uni.getStorageSync("run_time")
					intervalTime = uni.getStorageSync("interval_time")
				}
				// 获取香氛模式
				if(typeof uni.getStorageSync("model") == "number") {
					this.status_arr_sel = uni.getStorageSync("model")
				}
				// 运行的剩余时间
				this.time_remaining = runTime//运行时间
				this.timer.interval_time = intervalTime//间隔时间
				// 时间进度条
				if((this.timer.interval_time / 5) <= 1){
					this.time_run = [0,this.timer.interval_time]
				}else{
					// 运行时间进度条时间
					this.time_run = [0,this.timer.interval_time]
					// 
					this.time_run.splice(1,0,
						Math.round(parseInt(this.timer.interval_time * 0.2)),
						Math.round(parseInt(this.timer.interval_time * 0.4)),
						Math.round(parseInt(this.timer.interval_time * 0.6)),
						Math.round(parseInt(this.timer.interval_time * 0.8)),
					)
				}
			},
			// 获取状态栏高度
			get_status_height(){
				this.status_height = uni.getSystemInfoSync().statusBarHeight + 10 + "px"
			},
			// 保存时间
			fragrance_submit(){
				// 判断蓝牙是否处于连接状态
				bluetooth.bluetooth_switch().then(res =>{
					// 设置蓝牙的运行时间和间隔时间
					bluetooth.bluetooth_work_time(
						this.timer.run_time,
						this.timer.interval_time
					).then(res =>{
						// 设置缓存运行时间和间隔时间
						uni.setStorageSync("run_time",this.timer.run_time)
						uni.setStorageSync("interval_time",this.timer.interval_time)
						// 修改剩余时间
						this.time_remaining = this.timer.run_time
						// 时间进度条
						if((this.timer.interval_time / 5) <= 1) {
							this.time_run = [0,this.timer.interval_time]
						}else{
							// 运行时间进度条时间
							this.time_run = [0,this.timer.interval_time]
							// 
							this.time_run.splice(1,0,
								Math.round(parseInt(this.timer.interval_time * 0.2)),
								Math.round(parseInt(this.timer.interval_time * 0.4)),
								Math.round(parseInt(this.timer.interval_time * 0.6)),
								Math.round(parseInt(this.timer.interval_time * 0.8)),
							)
						}
						// 修改间隔时间
						for(let i in this.progress) this.progress[i].status = true
					})
				}).catch(err =>{
					// 判断用户是否打开gps定位服务\蓝牙开关,如果都已打开则进行的初始化
					this.location_status()
				})
			},
			// 运行时间定时器
			run_time_timer(){
				this.run_timer = setInterval(()=>{
					// 判断开关是否打开
					if(!this.switch_state){//未打开
						clearInterval(this.run_timer)
						this.run_timer = null
						return
					}
					// 定时器
					if(this.time_remaining <= 0){ 
						clearInterval(this.run_timer)
						this.run_timer = null
						for(let i in this.progress) this.progress[i].status = true
						this.time_remaining = uni.getStorageSync("run_time") ? uni.getStorageSync("run_time") : 60
						
						// 间隔时间定时器
						this.interval_time_timer()
						return
					}
					this.time_remaining -= 1
				},1000)
			},
			// 间隔时间定时器
			interval_time_timer(){
				// 定时运行
				this.timer_interval = setInterval(()=>{
					// 计算走过的时间
					this.runTime += 1
					// 判断开关是否打开
					if(!this.switch_state){//未打开
						clearInterval(this.timer_interval)
						this.timer_interval = null
						return
					}
					//求百分比 
					// 间隔时间进度条
					this.index_bottom = (Math.round(this.runTime / this.timer.interval_time * 10000) / 1000)
					// 根据不同的时间设置不同的等待时间
					let timer = 10
					if(this.timer.interval_time <= 60) timer = 9.6
					// 清除定时器
					if(this.index_bottom >= timer){
						clearInterval(this.timer_interval)
						this.timer_interval = null
						this.runTime = 0
						this.index_bottom = 0
						// 修改剩余时间
						this.time_remaining = uni.getStorageSync("run_time")
						// 运行时间定时器
						this.run_time_timer()
						return
					}
				}, 1000)
			},
			// 修改香氛模式
			modify_model(index){
				// 判断是否处于打开状态
				if(!this.switch_state){
					this.toast("请先打开开关")
					return
				}
				// 判断蓝牙是否处于连接状态
				bluetooth.bluetooth_switch().then(res =>{
					//
					let index_arr = [0, 1, 2, 3]
					// 选项修改浓度
					if(index_arr.includes(index)){
						// 修改浓度
						bluetooth.bluetooth_model(3).then(res =>{
							this.status_arr_sel = index
							// 储存香氛模式
							uni.setStorageSync("model",this.status_arr_sel)
						})
						// 修改运行时间和间隔时间
						this.modify_model_one(index)
						return
					}
					// 按钮修改浓度
					if(this.status_arr_sel == 3){ 
						// 修改浓度
						bluetooth.bluetooth_model(3).then(res =>{
							this.status_arr_sel = 0
							// 修改运行时间和间隔时间
							this.modify_model_one(0)
							// 储存香氛模式
							uni.setStorageSync("model",this.status_arr_sel)
						})
						return
					}
					// 按钮修改浓度
					if(index == 'switch'){
						//递增
						this.status_arr_sel += 1
						// 转成数值
						if(this.status_arr_sel == 0) this.status_arr_sel = 0
						else if(this.status_arr_sel == 1) this.status_arr_sel = 1
						else if(this.status_arr_sel == 2) this.status_arr_sel = 2
						else if(this.status_arr_sel == 3) this.status_arr_sel = 3
						// 
						// 修改浓度
						bluetooth.bluetooth_model(3).then(res =>{
							// 修改运行时间和间隔时间
							this.modify_model_one(this.status_arr_sel)
							// 储存香氛模式
							uni.setStorageSync("model",this.status_arr_sel)
						})
						return
					}
					
				}).catch(err =>{
					// 判断用户是否打开gps定位服务\蓝牙开关,如果都已打开则进行的初始化
					this.location_status()
				})
			},
			// 模式修改并修改时间
			modify_model_one(status){
				// 进度条相关
				// 修改选中状态
				for(let item of this.progress) item.status = false
				this.runTime = 0
				this.index_bottom = 0
				// 修改运行\间隔时间-微香
				if(status === 0){
					// 运行时间
					this.timer.run_time = 5
					// 间隔时间
					this.timer.interval_time = 20
					// 保存
					this.fragrance_submit()
					// 开始工作
					// 向蓝牙写入数据
					bluetooth.bluetooth_open().then(res =>{
						// 运行时间定时器
						if(this.run_timer){
							clearInterval(this.run_timer)
							this.run_timer = null
						}
						// 间隔时间定时器
						if(this.timer_interval){ 
							clearInterval(this.timer_interval)
							this.timer_interval = null
						}
						// 运行时间定时器
						this.run_time_timer()
					})
					return
				}
				// 修改运行\间隔时间-清香
				if(status === 1){
					// 运行时间
					this.timer.run_time = 15
					// 间隔时间
					this.timer.interval_time = 240
					// 保存
					this.fragrance_submit()
					// 开始工作
					// 向蓝牙写入数据
					bluetooth.bluetooth_open().then(res =>{
						// 运行时间定时器
						if(this.run_timer){
							clearInterval(this.run_timer)
							this.run_timer = null
						}
						// 间隔时间定时器
						if(this.timer_interval){ 
							clearInterval(this.timer_interval)
							this.timer_interval = null
						}
						// 运行时间定时器
						this.run_time_timer()
					})
					return
				}
				// 修改运行\间隔时间-淡香
				if(status === 2){
					// 运行时间
					this.timer.run_time = 15
					// 间隔时间
					this.timer.interval_time = 180
					// 保存
					this.fragrance_submit()
					// 开始工作
					// 向蓝牙写入数据
					bluetooth.bluetooth_open().then(res =>{
						// 运行时间定时器
						if(this.run_timer){
							clearInterval(this.run_timer)
							this.run_timer = null
						}
						// 间隔时间定时器
						if(this.timer_interval){ 
							clearInterval(this.timer_interval)
							this.timer_interval = null
						}
						// 运行时间定时器
						this.run_time_timer()
					})
					return
				}
				// 修改运行\间隔时间-浓香
				if(status === 3){
					// 运行时间
					this.timer.run_time = 20
					// 间隔时间
					this.timer.interval_time = 60
					// 保存
					this.fragrance_submit()
					// 开始工作
					// 向蓝牙写入数据
					bluetooth.bluetooth_open().then(res =>{
						// 运行时间定时器
						if(this.run_timer) clearInterval(this.run_timer)
						// 间隔时间定时器
						if(this.timer_interval) clearInterval(this.timer_interval)
						// 运行时间定时器
						this.run_time_timer()
					})
					return
				}
			},
			// 香氛开关
			fragrance_switch(){
				// 判断蓝牙是否处于连接状态
				bluetooth.bluetooth_switch().then(res =>{
					// 关闭
					if(this.switch_state){
						bluetooth.bluetooth_close().then(res =>{
							this.switch_state = false
							// 间隔时间定时器
							if(this.timer_interval){
								clearInterval(this.timer_interval)
								this.timer_interval = null
							}
							// 运行时间定时器
							if(this.run_timer){
								clearInterval(this.run_timer)
								this.run_timer = null
							}
						})
						return
					}
					// 向蓝牙写入数据
					bluetooth.bluetooth_open().then(res =>{
						// 打开
						this.switch_state = !this.switch_state
						// 运行时间定时器
						this.run_time_timer()
						// 写入香氛模式
						// if(typeof uni.getStorageSync("model") == "number"){
						bluetooth.bluetooth_model(3).then(res =>{
							this.status_arr_sel = uni.getStorageSync("model")
						})
						// }
					})
				}).catch(err =>{
					// 判断用户是否打开gps定位服务\蓝牙开关,如果都已打开则进行的初始化
					this.location_status()
				})
			},
			// 封装的一个弹窗
			toast(title){
				uni.showToast({
					title,
					icon:"none"
				})
			},
			// 
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
	}
	.page-back-img,.page-back-img image{
		width: 100%;
		height: 100%;
	}
	/* 内容 */
	.container{
		width: 100%;
		height: 100%;
		z-index: 9;
		position: absolute;
		top: 0;
	}
	/* title */
	.header{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #F0AD4E;
	}
	/* 时间 */
	.timer{
		width: 70%;
		margin: auto;
		position: relative;
		top: 50px;
	}
	.timer-bg{
		width: 100%;
		height: 36px;
	}
	.timer-bg image{
		width: 100%;
		height: 100%;
	}
	/* 剩余时间 */
	.time-remaining{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 13%;
		height: 35px;
		font-size: 9px;
		color: #d1b67f;
		position: absolute;
		top: 0;
	}
	/* 运行时间 */
	.time-run{
		display: flex;
		justify-content: space-around;
		/* justify-content: space-between; */
		width: 71%;
		font-size: 9px;
		color: #d1b67f;
		position: absolute;
		top: 0;
		right: 7%;
	}
	.time-run-item{
		flex: 1;
		display: flex;
		justify-content: space-between;
	}
	/*  */
	.time-run-item-last{
		justify-content: flex-end;
	}
	/* 进度条 */
	.time-progress{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 76%;
		position: absolute;
		top: 55%;
		right: 7%;
	}
	.time-progress-item{
		display: flex;
		width: 17px;
		height: 8px;
	}
	.time-progress-item image{
		width: 100%;
		height: 100%;
	}
	/*  */
	/* 香氛浓度 */
	.concentration{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 80%;
		height: 75px;
		position: absolute;
		left: 50%;
		bottom: 25vh;
		transform: translateX(-50%);
		font-size: 14px;
		color: #FFFFFF;
	}
	/* 按钮区 */
	.concentration-btn{
		display: flex;
		width: 100%;
	}
	/* 按钮 */
	.concentration-btn-item{
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(25% - 1px);
		height: 39px;
		border-right: 1px solid #FFFFFF;
		border-radius: 6px 0 0 6px;
		background: linear-gradient(to bottom,#B5B3B3,#404040);
		font-size: 13px;
	}
	/* 按钮区分 */
	.concentration-btn-item:nth-child(2),
	.concentration-btn-item:nth-child(3){
		width: calc(25% - 1px);
		border-right: 1px solid #FFFFFF;
		border-radius: 0;
	}
	.concentration-btn-item:nth-child(4){
		width: 25%;
		border: 0;
		border-radius: 0 6px 6px 0;
	}
	/* 选中按钮 */
	.concentration-btn-item-sel{
		background: linear-gradient(to bottom,#D1B67F,#806E4D);
	}
	/*  */
	/* 按钮组 */
	.btn-group{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		font-size: 12px;
		color: #D1B67F;
		position: absolute;
		left: 50%;
		bottom: 5vh;
		transform: translateX(-50%);
	}
	.btn-group-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.btn-group-item-img{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 57px;
		height: 57px;
		margin-bottom: 5px;
		border-radius: 7px;
		background: linear-gradient(to bottom,#686765 ,#454342);
	}
	.btn-group-item-img image{
		width: 37px;
		height: 37px;
	}
	/* 选中按钮组 */
	.btn-group-item-img-sel{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 57px;
		height: 57px;
		margin-bottom: 5px;
		border-radius: 7px;
		background: linear-gradient(to bottom,#D1B67F,#806E4D);
	}
	/*  */
	/* 香氛时间设置 */
	.fragrance-time{
		width: 100%;
		height: 240px;
		padding-top: 20px;
		border-radius: 20px 20px 0;
		background-color: #FFFFFF;
	}
	.fragrance-time-item{
		display: flex;
		align-items: center;
		width: 90%;
		margin: auto;
		margin-top: 10px;
	}
	.fragrance-time-item input{
		width: calc(100% - 120px);
		height: 45px;
		padding-left: 10px;
		border: 1px solid #F0F0F0;
		border-radius: 8px;
	}
	/* 按钮 */
	.fragrance-time-btn{
		display: flex;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.fragrance-time-btn button{
		width: 45%;
	}
	
	
	
	
	
	 
</style>
